<template>
  <div>
<!--    <AboutAside class="leftAside"></AboutAside>-->
    <section class="rightContent">
      <HomeHeader></HomeHeader>
      <h1>模板中心</h1>
        <AboutDraggable ref="share-image-in-app" id="share-image-in-app"></AboutDraggable>
    </section>
  </div>
</template>
<script>
  // import AboutAside from "../components/AboutAside";
  import HomeHeader from "../components/Home/HomeHeader";
  import AboutDraggable from "../components/About/AboutDraggable";
  import html2canvas from "html2canvas";

  export default {
    components:{
      // AboutAside,
      HomeHeader,
      AboutDraggable
    },
    data() {
      return {
          arr:[],
      }
    },
    methods:{
        getArr(){
            this.tableData = this.tableData.map((item) => {
                for (var i in item.characteristicValue) {
                    this.arr.push({
                        title: i,
                        text: item.characteristicValue[i],
                    });
                }
                return {
                    characteristicValue: this.arr,
                };
            });
            console.log(this.arr)
        },
        getUrlBase64(url, ext) {
            var canvas = document.createElement("canvas");   //创建canvas DOM元素
            var ctx = canvas.getContext("2d");
            var img = new Image;
            img.crossOrigin = 'Anonymous';
            img.src = url;
            console.log(img.src)
            img.onload = function () {
                canvas.height = 60; //指定画板的高度,自定义
                canvas.width = 85; //指定画板的宽度，自定义
                ctx.drawImage(img, 0, 0, 60, 85); //参数可自定义
                var dataURL = canvas.toDataURL("image/" + ext);
                console.log(dataURL)
                // callback.call(this, dataURL); //回掉函数获取Base64编码
                canvas = null;
            };
        },
        async getShareImageUrl(){

            try{
                console.log(document.querySelector('#share-image-in-app'))
                const imageUrl = await this.drawCanvas('#share-image-in-app')
                console.log(imageUrl)
            }
            catch(e){
                console.log(e)
            }
        },
        drawCanvas(selector) {
            const dom = document.querySelector(selector);
            console.log(dom)
            return html2canvas(dom, {
                useCORS: true // 解决图片跨域问题
            }).then(async (canvas) => {
                console.log(3)
                let imageUrl = canvas.toDataURL("image/png"); // 将canvas转成base64图片格式
                console.log(4)
                return Promise.resolve(imageUrl)
            })
                .catch((e) => {
                    console.log(e);
                });
        }




    },
      created() {
        this.getArr()
          this.getShareImageUrl()
      }

  };
</script>
<style scoped>
  .leftAside{
    position: fixed;
    left: 0;
    top: 0;
  }
  .rightContent{
    padding-left: 270px;
  }
  .rightContent{
    padding-left: 270px;
  }
</style>
